<div class="register-bg-section skin-bgc"></div>
<div class="register-content">
    <div class="register-content-title">注册</div>
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">用户名</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="username" id="username"/>
                <nz-form-explain *ngIf="validateForm.get('username')?.dirty && validateForm.get('username')?.errors">
                    请输入用户名
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input type="password" id="password" formControlName="password"
                       (ngModelChange)="updateConfirmValidator()"/>
                <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">
                    请输入密码
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="rePassword" nzRequired>密码确认</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input type="password" formControlName="rePassword" id="rePassword"/>
                <nz-form-explain
                    *ngIf="validateForm.get('rePassword')?.dirty && validateForm.get('rePassword')?.errors">
                    <ng-container *ngIf="validateForm.get('rePassword')?.hasError('required')">
                        请输入密码
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('rePassword')?.hasError('confirm')">
                        两次输入的密码不一致
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phone" nzRequired>邮箱</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['email']">
                <input nz-input type="email" formControlName="email" id="email"/>
                <nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
                    <ng-container *ngIf="validateForm.get('email')?.hasError('required')">
                        请输入手机号
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('email')?.hasError('email')">
                        请输入正确格式的邮箱地址
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row style="margin-bottom:8px;">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary">注册</button>
                <a style="float: right" routerLink="/login">已有账号?</a>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>
